<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="等级管理">
<style>
    .form-horizontal .controls {
        line-height: 40px;
        height: 40px;
        margin-left: 3px;
    }

</style>

<div id="grid"></div>
<#----------------------------------------------编辑表单start--------------------------------------------------------->
<div id="editContent" style="display:none;">
    <form id="editForm" class="form-horizontal" action="${basepath}/rest/manage/rank/updateRankJson" method="post">
        <div class="row">
            <input type="hidden" class="control-text span-width span10" name="id">

            <div class="control-group span16">
                <label class="control-label">会员等级：</label>

                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" name="name" disabled>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="control-group span16">
                <label class="control-label">会员名称：</label>

                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" name="type" disabled>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">优惠百分比：</label>

                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" style="width: 100px" name="percent"
                           data-rules="{required : true,min:0,max:100,number:true}">
                    %
                </div>
            </div>
        </div>

        <div class="row">
            <div class="control-group span16">
                <label class="control-label">加盟费用：</label>

                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" style="width: 100px" name="charge"
                           data-rules="{required : true,min:0,number:true}">
                </div>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">赠送商品：</label>

            <div class="controls">
                <div id="p-product">
                    <input type="hidden" id="p-value" name="productID" value=${e.productID!}>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">商品规格：</label>

            <div class="controls">
                <div id="sub-spec">
                    <input type="hidden" id="sub-value" name="specID" value=${e.specID!}>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="control-group span16">
                <label class="control-label">商品数量：</label>

                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" style="width: 100px" name="productNumber"
                           data-rules="{required : true,min:0,number:true}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">邀请奖金：</label>

                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" style="width: 100px" name="affMoney"
                           data-rules="{required : true,min:0,number:true}">
                </div>
            </div>
        </div>

    </form>
</div>
<#----------------------------------------------编辑表单end--------------------------------------------------------->
<script>
    var Select = BUI.Select,
            Grid = BUI.Grid,
            Store = BUI.Data.Store;
    //赠送商品和商品规格下拉框
    var pStore = new Store({
        url: '/rest/manage/product/getAllProduct',
        autoLoad: true,
        root: 'data'
    });
    var pSelect = new Select.Select({
        render: '#p-product',
        valueField: '#p-value',
        list: {
            itemTpl: '<li>{name}</li>',
            idField: 'id'
        },
        store: pStore
    }).render();

    //赠送商品和商品规格下拉框
    var subStore = new Store({
        url: '/rest/manage/spec/getSpecByProductID',  //设置加载数据的URL
        autoLoad: true, //创建Store时自动加载数据
        proxy: {
            method: 'GET',
            dataType: 'json'
        },
        root: 'data'
    });
    var sSelect = new Select.Select({
        render: '#sub-spec',
        valueField: '#sub-value',
        list: {
            itemTpl: '<li>{combination}</li>',
            idField: 'id'
        },
        store: subStore
    }).render();
    //获取二级下拉数据源
    pSelect.on('change', function (e) {
        var id = e.item.id;
        var obj = new Object();
        obj.productID = id;
        subStore.load(obj);       //接收对象参数
    });
    <#---------------------------------------------列表显示------------------------------------>

    var columns = [
        {title: '序号', dataIndex: 'id', elCls: 'center', width: '5%'},
        {title: '会员等级', dataIndex: 'name', width: '10%', elCls: 'center'},
        {title: '会员名称', dataIndex: 'type', elCls: 'center', width: '15%'},
        {
            title: '加盟费用', dataIndex: 'charge', elCls: 'center', width: '10%', renderer: function (value) {
            return (value * 1).toFixed(2);
        }
        },
        {
            title: '商品优惠', dataIndex: 'percent', elCls: 'center', width: '10%', renderer: function (value) {
            return (value * 100).toFixed(2) + "%";
        }
        },
        {
            title: '赠送商品', dataIndex: 'productName', elCls: 'center', width: '15%', renderer: function (value) {
            if (value == "" || value == null) {
                return "无";
            } else {
                return value;
            }
        }
        },
        {
            title: '商品规格', dataIndex: 'combination', elCls: 'center', width: '15%', renderer: function (value) {
            if (value == "" || value == null) {
                return "无";
            } else {
                return value;
            }
        }
        },
        {title: '商品数量', dataIndex: 'productNumber', elCls: 'center', width: '10%'},
        {
            title: '邀请奖金', dataIndex: 'affMoney', elCls: 'center', width: '10%', renderer: function (value) {
            return (value * 1).toFixed(2);
        }
        },
        {
            title: '操作',
            dataIndex: 'id',
            elCls: 'center',
            width: '10%',
            renderer: function (value) {
                return '<a href="javascript:edit(' + value + ')">编辑</a>';
            }
        }
    ];
    var store = new Store({
                url: 'loadData',
                autoLoad: true, //自动加载数据
                params: { //配置初始请求的参数
                    length: '10',
                    status: $("#status").val()
                },
                pageSize: 10,	// 配置分页数目
                root: 'list',
                totalProperty: 'total'
            }),
            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                store: store,
                plugins: [Grid.Plugins.CheckSelection], // 插件形式引入多选表格
                // 底部工具栏
                bbar: {
                    pagingBar: true
                }
            }).render();
    <#---------------------------------------------列表显示------------------------------------>

    /*------------------------------------------------编辑表单处理 start-----------------------------------------------*/
    var editForm = new BUI.Form.Form({
        srcNode: '#editForm',
        submitType: 'ajax',
        callback: function (data) {
            var obj = new Object();
            obj.start = 0; //返回第一页
            store.load(obj);
            editDialog.close();
        }
    }).render();

    var editDialog = new BUI.Overlay.Dialog({
        title: '编辑会员等级',
        width: 500,
        height: 400,
        contentId: 'editContent',
        success: function () {
            if (editForm.isValid()) {
                editForm.submit();
            } else {
                editForm.valid();
            }
        }
    });

    //编辑按钮事件
    function edit(id) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "${basepath}/rest/manage/rank/toEditRankJson",
            data: {
                id: id
            },
            success: function (data) {
                var form = $("#editForm")[0];
                BUI.FormHelper.setFields(form, data.data);
                editDialog.show();
            }
        });
    }
    /*------------------------------------------------编辑表单处理 end------------------------------------------------*/

</script>

</@page.pageBase>
